<template>
	<!-- 填写发票信息 -->
	<view class="content display  width-100 displayColumn">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">填写发票信息</text>
			</template>
		</u-navbar>

		<view class="fn_content display  displayColumn width-100 all_item">
			<view class="fn_content_all display displayColumn width_699">
				<view class="fn_one display  width_699 M-T30">
					<span class="fontSize font_comm fn_txt1">发票信息</span>
				</view>
				<view class="fn_two display  width_699 displayColumn M-T20">
					<view class="fn_two_one display width_699 fontSize font_comm displaycenter_aliem M-T30">
						<span class="fn_txt2 M-L30">抬头类型</span>
						<view class="circle display  all_item M-L40" :style="{border:color}" @click="changeRadio(0)">
							<view class="fn_circle display " v-if="flag==0"></view>
						</view>
						<span :class="{fn_txt3:flag!=0,fn_txt31:flag==0,'M-L12':true}"
							@click="changeRadio(0)">企业单位</span>
						<view class="circle display  all_item M-L60" :style="{border:color1}" @click="changeRadio(1)">
							<view class="fn_circle display " v-if="flag ==1"></view>
						</view>
						<span :class="{fn_txt3:flag!=1,fn_txt31:flag==1,'M-L12':true}"
							@click="changeRadio(1)">个人/非企业单位</span>
					</view>
					<view class="fn_lines M-L24 M-T30"></view>
					<view class="fn_two_two display  width_699 displaycenter_aliem M-T30 fontSize font_comm"
						v-if="flag==0">
						<span class="fn_inpt1 M-L30" style="white-space: nowrap;">公司名称</span>
						<input type="text" v-model="forDate.gongsiName" placeholder="请填写公司名称(必填)" class="fn_inpt M-L40"
							placeholder-class="fn_inpt1" />
						<view class="display  displaycenter_aliem fontSize font_comm" style="margin-left: 128rpx;"
							@click="show=true">
							<span class="fn_inpt1" style="white-space: nowrap;">选择</span>
							<uni-icons class="M-L8" type="right" color="#72778A" size="15"></uni-icons>
						</view>
					</view>
					<view class="fn_two_two display  width_699 displaycenter_aliem M-T30 fontSize font_comm"
						v-if="flag==1">
						<span class="fn_inpt1 M-L30" style="white-space: nowrap;">抬头名称</span>
						<input type="text" v-model="forDate.taitouName" placeholder="请填写抬头名称(必填)" class="fn_inpt M-L40"
							placeholder-class="fn_inpt1" />

					</view>
					<view class="fn_lines M-L24 M-T30"></view>
					<view class="fn_two_two display  width_699 displaycenter_aliem M-T30 fontSize font_comm"
						v-if="flag==0">
						<span class="fn_inpt1 M-L30">公司税号</span>
						<input v-model="forDate.gongsisuihao" type="text" placeholder="请填写公司税号(必填)" class="fn_inpt M-L40"
							placeholder-class="fn_inpt1" />
					</view>
					<view class="fn_two_two display  width_699 displaycenter_aliem M-T30 fontSize font_comm"
						v-if="flag==1">
						<span class="fn_inpt1 M-L30">电话号码</span>
						<input v-model="forDate.phoneNumber" type="text" placeholder="请填写电话号码(必填)" class="fn_inpt M-L40"
							placeholder-class="fn_inpt1" />
					</view>
				</view>
				<!-- 总金额 -->
				<view class="all_money  display width_699 displaycenter_aliem M-T20" @click="tabdingdan">
					<view class="all_money_left display  displaycenter_aliem fontSize font_comm M-L30">
						<span class="fn_txt4">总金额</span>
						<span class="fn_txt5 M-L12">￥<span style="font-size: 40rpx;">{{order.money}}</span></span>
					</view>
					<view class="all_money_right display  displaycenter_aliem fontSize font_comm M-R30">
						<span class="fn_txt6">包含{{order.num}}个订单，将开具1张发票</span>
					</view>
				</view>
				<!--接受方式 -->
				<!-- <view class="send_style display displaycenter_aliem  displayColumn  width_699 M-T36">
					<view class="send_style_title display  width_699  fontSize  font_comm">
						<span class="fn_txt1">接收方式</span>
					</view>
					<view class="send_style_email display  width_699 displaycenter_aliem M-T20">
						<span class="fn_txt4 M-L30">电子邮件</span>
						<input v-model="forDate.email" type="text" placeholder="请填写接收邮箱(必填)" class="fn_inpt M-L40"
							placeholder-class="fn_inpt1" />
					</view>
				</view> -->
				<!-- 温馨提示 -->
				<view class="totil display displaycenter_jus  displayColumn M-T36">
					<view class="totil_one display fontSize font_comm">
						<span class="fn_txt1" style="color: #FF672D;">温馨提示</span>
					</view>
					<view class="totil_two display  width_699 all_item M-T20">
						<span class="fn_txt7">请您仔细核对填写的发票信息，<span style="color: #126BC9;">发票只能开具一次</span>，开具后不可修改</span>
					</view>
				</view>

			</view>


		</view>

		<!-- 按钮 -->
		<view class="button display  width-100 all_item" style="margin-top: 310rpx;">
			<button class="fn_btns1s fontSize font_comm display all_item M-L30" @click="confirm">提交</button>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" mode="bottom" :safeAreaInsetBottom="false" round="20">
			<view class="popupcontent display  displayColumn width-100">
				<!-- 常用抬头 -->
				<view class="common_taitou display width-100  fontSize font_comm M-T30">
					<span class="fn_taigou M-L30">我的常用抬头</span>
					<uni-icons type="closeempty" class="M-R30" color="#333333" size="24"
						@click="show=false"></uni-icons>
				</view>
				<!-- 列表 -->
				<scroll-view scroll-y="true" style="height: 340rpx;margin-top: 30rpx;" @scrolltolower="scrolltolower">

					<view class="width-100 display  all_item displayColumn M-T20" v-for="(item,index) in arr2"
						:key="index">
						<view class="wode_all display  width_699  displaycenter_aliem">
							<view class="wode_all_left display  all_item M-L24">
								<view class="fn_wode_all_one display all_item">
									<view class="fn_wode_all_one_one"></view>
								</view>
							</view>
							<view class="wode_all_right display  displayColumn M-L16">
								<view class="wode_all_right_title display  displayColumn  fontSize font_comm" @click="changeheader(item)">
									<span class="fn_txt10">{{item.headerName}}</span>
									<span class="fn_txt11 M-T8">{{item.headerNumber}}</span>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 按钮 -->
				<view class="button display  width-100 all_item" style="margin-top: 30rpx;">
					<button class="fn_btns1s fontSize font_comm display all_item M-L30" @click="addcomoonheader">添加常用抬头</button>
				</view>
			</view>
		</u-popup>
		<!-- 弹窗 -->
		<u-popup :show="show1" mode="bottom" :safeAreaInsetBottom="false" round="20">
			<view class="fn_show1 display  width-100 displayColumn">
				<view class="fn_show1_one display   fontSize font_comm M-T30">
					<span class="fn_kaiju M-L30">确认开具</span>
					<uni-icons type="closeempty" class="M-R30" @click="show1 = false" color="#000"
						size="35rpx"></uni-icons>
				</view>
				<view class="fn_show1_two display width_750  M-T30 fontSize font_comm">
					<span class="fn_type M-L30">发票类型</span>
					<span class="fn_type2 M-R30">{{data.invoiceHeaderType ==0 ?'企业发票' :'个人发票'}}</span>
				</view>
				<view class="fn_lines M-L30 M-T30 width_699" style="width: 690rpx;" v-if="flag==0">

				</view>
				<view class="fn_show1_two display width_750  M-T30 fontSize font_comm" v-if="flag==0">
					<span class="fn_type M-L30">公司名称</span>
					<span class="fn_type2 M-R30">{{data.headerName}}</span>
				</view>
				<view class="fn_lines M-L30 M-T30 width_699" style="width: 690rpx;">

				</view>
				<view class="fn_show1_two display width_750  M-T30 fontSize font_comm" v-if="flag==0">
					<span class="fn_type M-L30">公司税号</span>
					<span class="fn_type2 M-R30">{{data.headerNumber}}</span>
				</view>

				<view class="fn_show1_two display width_750  M-T30 fontSize font_comm" v-if="flag==1">
					<span class="fn_type M-L30">抬头名称</span>
					<span class="fn_type2 M-R30">{{data.headerName}}</span>
				</view>
				<view class="fn_lines M-L30 M-T30 width_699 " style="width: 690rpx;">

				</view>
				<view class="fn_show1_two display width_750  M-T30 fontSize font_comm" v-if="flag==1">
					<span class="fn_type M-L30">手机号码</span>
					<span class="fn_type2 M-R30">{{data.headerNumber}}</span>
				</view>
				<!-- <view class="fn_show1_two display width_750  M-T30 fontSize font_comm">
					<span class="fn_type M-L30">电子邮件</span>
					<span class="fn_type2 M-R30">952605970@qq.com</span>
				</view> -->
				<view class="fn_show_buton display  all_item width_750" style="margin-top: 60rpx;">
					<button class="fn_btn_show1 display all_item fontSize font_comm" @click="toconfirmOk">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order:{
					num:0,
					money:0
				},//dingdanShu:0,//从上个页面穿过来  判断上个页面的数组的flag为true 就是订单数 金额为true的总额
				show1: false, //确认开具
				show: false, //弹床
				flag: 0,
				color: '2rpx solid #72778A',
				arr1: [],
				arr2:[],
				pageNum:1,
				pageSize:10,
				data:{},
				forDate:{
					gongsiName:'',//公司名称
					taitouName:'',//抬头名称
					gongsisuihao:'',//公司税号
					phoneNumber:'',//电话号码
					email:'',//电子邮件
				}
			}
		},
		onLoad(options) {
			this.arr1 = JSON.parse(options.arr1)
			console.log(this.arr1)
			//计算总额和个数
			this.panduan();
		},
		watch:{
			show(newVale,oldVale){
				console.log(newVale)
				if(newVale){
					this.pageNum = 1;
					this.arr2 = []
					this.getList();
				}
			}
		},
		methods: {
			// 提交
			confirm() {
				let x = [];
				// 支付订单
				this.arr1.forEach(item=>{
					if(item.flag){
						x.push(item.id);
					}
				})
				let data = {
					invoiceHeaderType:this.flag,//发票类型
					headerName:this.forDate.gongsiName||this.forDate.taitouName,//名称
					headerNumber:this.forDate.gongsisuihao || this.forDate.phoneNumber,//信用代码
					payOrderIds:x.join(','),//支付订单
				}
				// console.log(data)
				this.data = data;
				// 企业单位提交
				this.show1 = true;
				
				
			},
			toconfirmOk() {
				this.$modal.loading('加载中')
				console.log(this.data)
				this.$req.post('/xcx/userInvoice',this.data).then(res=>{
					this.$modal.closeLoading();
					console.log(res)
					if(res.data.code==200){
						setTimeout(()=>{
							this.$modal.msg('开票成功');
							this.$tab.navigateTo('/packageC/confirmOk/confirmOk')
						},700)
						
					}else{
						this.$modal.msg(res.data.msg);
					}
					
				})
				
				
				
				
			},
			scrolltolower(){
				console.log('触底加载');
				if(this.total <= this.arr2.length){
					return false;
				}
				this.pageNum++;
				this.getList()
			},
			// 添加常用抬头
			addcomoonheader(){
				this.$tab.navigateTo('/packageC/addtaitou/addtaitou')
			},
			changeheader(item){
				this.flag = Number(item.invoiceHeaderType)
				if(item.invoiceHeaderType=='0'){
					this.forDate.gongsiName = item.headerName;
					this.forDate.gongsisuihao = item.headerNumber;
				}else{
					this.forDate.taitouName = item.headerName;
					this.forDate.phoneNumber = item.headerNumber;
				}
				this.show = false;
			},
			// 获取抬头列表
			getList(){
				this.$modal.loading('加载中');
				let data = {
					pageSize:this.pageSize,
					pageNum:this.pageNum
				}
				this.$req.get('/xcx/userInvoiceHeader/list',data).then(res=>{
					console.log(res)
					this.$modal.closeLoading();
					this.total = res.data.total;
					this.arr2 = this.arr2.concat(res.data.rows);
				})
			},
			// 计算总额和订单数
			panduan(){
				
				this.arr1.forEach(item=>{
					if(item.flag){
						this.order.num ++;
						this.order.money+=Number(item.payCash);
					}
				})
				
			},
			tabdingdan(){
				let Attrr = [];
				this.arr1.forEach(item=>{
					if(item.flag){
						Attrr.push(item)
					}
				})
				this.$tab.navigateTo('/packageC/relatedorders/relatedorders?arr1='+JSON.stringify(Attrr));
				
				
			},
			changeRadio(index) {
				if (index == 0) {
					this.flag = 0;
					this.color = this.flag == 0 ? '2rpx solid #126BC9' : '2rpx solid #72778A'
					this.color1 = this.flag == 1 ? '2rpx solid #126BC9' : '2rpx solid #72778A'
				} else {
					this.flag = 1;
					this.color1 = this.flag == 1 ? '2rpx solid #126BC9' : '2rpx solid #72778A'
					this.color = this.flag == 0 ? '2rpx solid #126BC9' : '2rpx solid #72778A'
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.fn_content_all {}

	.fn_txt1 {
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}

	.fn_two {
		width: 690rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_txt2 {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_txt3 {
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A;
	}

	.fn_txt31 {
		font-weight: 600;
		font-size: 28rpx;
		color: #212121;
	}

	.circle {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #72778A;

		.fn_circle {
			width: 24rpx;
			height: 24rpx;
			background: #126BC9;
			border-radius: 50%;
		}
	}

	.fn_lines {
		width: 630rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
	}

	.fn_inpt {
		text-align: left;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_inpt1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}

	.all_money {
		justify-content: space-between;
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_txt4 {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_txt5 {
		font-weight: 600;
		font-size: 24rpx;
		color: #FF672D;
	}

	.fn_txt6 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.totil_two {
		width: 690rpx;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_txt7 {
		width: 630rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_btns1s {
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.send_style_email {
		width: 690rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.popupcontent {
		width: 750rpx;
		height: 622rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.common_taitou {
		justify-content: space-between;
	}

	.fn_taigou {
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}

	.wode_all {
		width: 690rpx;
		height: 130rpx;
		background: #F6F6F6;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_wode_all_one {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		border: 2rpx solid #126BC9;

		.fn_wode_all_one_one {
			width: 24rpx;
			height: 24rpx;
			background: #126BC9;
			border-radius: 50%;
		}
	}

	.fn_txt10 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000
	}

	.fn_txt11 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.wode_all_right_title {
		// justify-content: flex-start;
		align-items: flex-start;
	}

	.fn_show1 {
		width: 750rpx;
		min-height: 578rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	.fn_show1_one {
		width: 750rpx;
		justify-content: space-between;
	}

	.fn_kaiju {
		font-weight: 600;
		font-size: 32rpx;
		color: #000000;
	}

	.fn_show1_two {
		justify-content: space-between;
	}

	.fn_type {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_type2 {
		font-weight: 600;
		font-size: 28rpx;
		color: #212121;
	}

	.fn_btn_show1 {
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>